<template>
  <div>
    <el-container>
      <el-aside class="align-lm">
        <div class="align-lm">
           <el-image
      style="width: 100px; height: 100px"
      :src="image1"
      fit="contain"></el-image>
          <uploadFile @updataFile="updataOtherFile1"></uploadFile>
            <el-image
      style="width: 100px; height: 100px"
      :src="image2"
      fit="contain"></el-image>
          <uploadFile @updataFile="updataOtherFile2"></uploadFile>
          <el-input-number
            v-model="相似度阈值"
            :precision="1"
          ></el-input-number>
          <h4>参数：</h4>
          <pre>{{ data图像比对文件上传 }}</pre>
          <div>
            <button type="button" @click="图像比对()">
              图像比对
            </button>
            <button type="button" @click="改进建议()">
              改进建议
            </button>
          </div>
        </div>
      </el-aside>
      <el-main>
        <h3>
          接口请求历史
          <button type="button" @click="清空历史()">清空历史</button>
        </h3>
        <div v-loading="loading">
          <div v-for="(item, k) in arrRes" :key="k">
            <h5 class="align-cm">
              {{ $moment(item.time).format('YYYY-MM-DD HH:mm:ss') }}
            </h5>
            <div class="dis-flex">
              <div style="width:40%;overflow:auto;">
                
                <el-row>
                  <el-col :span="24">
                    参数:
                  </el-col>
                  <el-col :span="24">
                    相似度阈值:
                    {{ item.params.threshold }}
                  </el-col>
                </el-row>
                  <el-col :span="10">
                    <el-card>
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="item.params.image1_url"
                        fit="contain"
                      ></el-image>
                      <div class="align-cm">图像1</div>
                    </el-card>
                  </el-col>
                  <el-col :span="10">
                    <el-card>
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="item.params.image2_url"
                        fit="contain"
                      ></el-image>
                      <div class="align-cm">图像2</div>
                    </el-card>
                  </el-col>
                  <el-col :span="4">
                   
                  </el-col>
                </el-row>
              </div>
              <div style="width:60%">
                结果:
                <el-row>
                  <template v-if="item.resolve.suggestion">
                    <el-col :span="24">
                      taskId:{{ item.resolve.taskId }}
                    </el-col>
                    <el-col :span="24">
                      suggestion:
                      <div class="align-lm" v-html="parseMarkdownToHTML(item.resolve.suggestion)"></div>
                    </el-col>
                  </template>
                  <template v-else>
                    <el-col :span="24">
                      taskId:{{ item.resolve.taskId }}
                    </el-col>
                    <el-col :span="4">
                      isMatch:{{ item.resolve.isMatch }}
                    </el-col>
                    <el-col :span="4">
                      mode:{{ item.resolve.mode }}
                    </el-col>
                    <el-col :span="4">
                      similarity:{{ item.resolve.similarity }}
                    </el-col>
                  </template>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        
      </el-main>
    </el-container>
  </div>
</template>

<script>
import storage from '@/assets/storage.js';

export default {
  name: 'HelloWorld',
  components: {
    uploadFile: () => {
      return import('@/components/uploadFile.vue');
    },
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      baseURL: 'http://47.98.102.117:10000',
      image1:
        'http://qiniuoss.chenxi618.com/f37f45bE-4EFF-Aede-619D-Fb4fEC96A7E6.png',
      image2:
        'http://qiniuoss.chenxi618.com/f37f45bE-4EFF-Aede-619D-Fb4fEC96A7E6.png',
      相似度阈值: '80.0',
      loading: false,

      arrRes: [],
      maxLen: this.$config.maxLen,
    };
  },
  computed: {
    data图像比对文件上传: function() {
      return {
        image1_url: this.image1,
        image2_url: this.image2,
        threshold: this.相似度阈值,
      };
    },
  },
  methods: {
    updataOtherFile1: function(file) {
      this.image1 = file.url;
    },
    updataOtherFile2: function(file) {
      this.image2 = file.url;
    },
    test: function() {
      this.axios({
        url: 'http://127.0.0.1:4523/m1/5194974-4860836-default/captchaImage',
      })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        })
        .finally(_ => {});
    },
    健康检查: function() {
      const URL = '/api/health';
      this.axios({
        baseURL: this.baseURL,
        url: URL,
        method: 'get',
      });
    },

    图像比对: function() {
      this.loading = true;
      const URL = '/api/v1/image/compare';
      let d = this.data图像比对文件上传;
      this.axios({
        baseURL: this.baseURL,
        url: URL,
        headers: {
          'content-type': 'multipart/form-data',
        },
        method: 'post',
        data: d,
      })
        .then(res => {
          if (res.status === 200) {
            return res.data;
          }
        })
        .then(res => {
          this.处理请求(d, res.data);
        })
        .catch(err => {
          console.error(err);
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    改进建议: function() {
      this.loading = true;
      const URL = '/api/v1/image/suggest';
      let d = this.data图像比对文件上传;
      this.axios({
        baseURL: this.baseURL,
        url: URL,
        headers: {
          'content-type': 'multipart/form-data',
        },
        method: 'post',
        data: d,
      })
        .then(res => {
          if (res.status === 200) {
            return res.data;
          }
        })
        .then(res => {
          this.处理请求(d, res.data);
        })
        .catch(err => {
          console.error(err);
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    处理请求: function(参数, 结果) {
      let item = {
        time: new Date().getTime(),
        params: 参数,
        resolve: 结果,
      };
      let len = this.arrRes.length;
      if (len >= this.maxLen) {
        this.arrRes.splice(0, 1);
      }
      this.arrRes.push(item);

      storage.setLS('res', this.arrRes);
    },
    清空历史: function() {
      this.arrRes.splice(0, this.arrRes.length);
      storage.setLS('res', this.arrRes);
    },
    parseMarkdownToHTML:function(markdown){
      // 简单的 Markdown 解析
      let html = markdown
        // 替换标题
        .replace(/^### (.*$)/gm, '<h3>$1</h3>')
        .replace(/^## (.*$)/gm, '<h2>$1</h2>')
        .replace(/^# (.*$)/gm, '<h1>$1</h1>')
        // // 替换列表
        .replace(/^\s*[-*+]\s+(.*)$/gm, '<li>$1</li>')
        // .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
        // // 替换有序列表
        .replace(/^\s*\d+\.\s+(.*)$/gm, '<li>$1</li>')
        // .replace(/(<li>.*<\/li>)/s, '<ol>$1</ol>')
        // // 替换加粗
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        // // 替换斜体
        .replace(/\*(.*?)\*/g, '<em>$1</em>')
        // // 替换段落
        .replace(/^\s*([^<].*)$/gm, '<p>$1</p>')
        // // 修复嵌套列表
        .replace(/<\/ul>\s*<ul>/g, '')
        .replace(/<\/ol>\s*<ol>/g, '');
      return html;
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    let arr = storage.getLS('res');
    if (arr && arr.length > 0) {
      arr.forEach(item => {
        this.arrRes.push(item);
      });
    }
    console.log(this.$config)
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
